<!--
  会议室预约-会议室预约信息内容
  props：
    title string 标题
    label array 会议室设置标签 default：["投影仪", "音响", "话筒", "会板"]
    range string 可容纳人数
    address string 会议室地址
    src string 会议室照片
-->
<template>
  <div class="meeting-room-wrapper">
    <f7-card class="meeting-room-card">
      <f7-card-content class="meetin-room-content">
        <div class="list media-list">
          <ul>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">{{title}}</div>
                  </div>
                  <div class="item-subtitle">
                    <van-tag
                      v-for="(text, i) in label"
                      :key="text + i"
                      :color="tagColor"
                      :text-color="tagTextColor"
                    >
                      {{text}}
                    </van-tag>
                  </div>
                  <div class="item-text">
                    <p>可容纳：{{range}}</p>
                  </div>
                </div>
                <div class="item-media">
                  <img :src="src" width="105" height="63px">
                </div>
              </div>
              <div class="item-content2">
                <p>地址：{{address}}</p>
              </div>
              <div class="item-footer">
                <div class="date-wrapper">
                  <div
                    class="date-box"
                    v-for="(item, i) in dates"
                    :key="i + item.title"
                    :style="isReserved(item.isSubscribe)"
                  >
                    <span v-if="i % 2 === 0" class="date-flag">{{item.title}}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </f7-card-content>
    </f7-card>
  </div>
</template>

<script>
import { Tag } from "vant"
function defaultDates() {
  let result = [];
  for (let i = 0; i < 17; i++) {
    result.push({title: i + 1, isSubscribe: [2,10,11,12,16].includes(i + 1)});
  }
  return result;
}
export default {
  name: "qm-meeting-room-card",
  components: {
    [Tag.name]: Tag
  },
  props: {
    title: {
      type: String,
      default: "一楼会议室101"
    },
    label: {
      type: Array,
      default: () => ["投影仪", "音响", "话筒", "会板"]
    },
    range: {
      type: String,
      default: "20～30人"
    },
    address: {
      type: String,
      default: "创意中央A栋1楼1号会议室101"
    },
    src: {
      type: String,
      default: require("/static/img/list/pic-huiyishi1.png")
    },
    dates: {
      type: Array,
      default: defaultDates
    }
  },
  data() {
    return {
      tagColor: "#F1F3F6",
      tagTextColor: "#61677A"
    }
  },
  methods: {
    isReserved(isSubscribe) {
      return isSubscribe ? { backgroundColor: "#3385FF" } : {}
    }
  }
}
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
.meeting-room-wrapper {
  margin-bottom: calc(20px * var(--ratio));
  &:last-child {
    margin-bottom: 0;
  }
}
.meeting-room-card {
  margin: 0;
  padding: calc(30px * var(--ratio)) calc(30px * var(--ratio)) calc(18px * var(--ratio));
  box-shadow: 0 calc(4px * var(--ratio)) calc(10px * var(--ratio)) 0 rgba(28, 53, 88, 0.1);
  border-radius: calc(16px * var(--ratio));

  .meetin-room-content {
    padding: 0;

    .item-inner,.item-media {
      padding: 0;
    }

    .item-inner {
      margin-right: calc(35px * var(--ratio));
    }
  }

  .list {
    margin: 0;

    .item-content {
      padding-left: 0;
    }

    .item-title {
      margin-bottom: calc(15px * var(--ratio));
      font-size: var(--font-size-maintitle);
      font-weight: 500;
      line-height: calc(50px * var(--ratio));
    }

    .item-text {
      margin-bottom: calc(10px * var(--ratio));
      max-height: 100px;
      font-size: var(--font-size-subcontent-2);
      color: #61677A;
      line-height: calc(33px * var(--ratio));

      p {
        margin: 0 0 calc(10px * var(--ratio));
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .item-subtitle {
      margin-bottom: calc(20px * var(--ratio));
      .van-tag {
        margin-right: calc(12px * var(--ratio));
        display: inline-block;
        padding: calc(5px * var(--ratio)) calc(12px * var(--ratio));
        line-height: calc(40px * var(--ratio));
        border-radius: calc(4px * var(--ratio));

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .item-content2 {
      margin-bottom: calc(20px * var(--ratio));
      font-size: var(--font-size-subcontent-2);
      color: #61677A;
      p {
        // margin: 0 0 calc(10px * var(--ratio));
      }
    }

    .item-footer {
      overflow: hidden;
      .date-wrapper {
        margin-top: calc(26px * var(--ratio));
        display: flex;
        height: calc(24px * var(--ratio));
        background-color: #DCE8FA;

        .date-box {
          position: relative;
          flex: 0 0 calc(100% / 17);

          .date-flag {
            position: absolute;
            top: -120%;
            font-size: var(--font-size-weak);
            color: var(--color-text-subtext);
          }
        }
      }
    }
  }
}
</style>